<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>事件传参</p>
    <!-- 隐式传递事件对象，不写括号也不写参数 -->
    <button @click="showData">打印数据</button>
    <hr>
    <button @click="showArg(666, msg)">有自定义参数</button>
    <hr>
    <!-- 显式传递，固定的名字，叫$event -->
    <button @click="showArg1($event)">有预定义参数</button>
    <input type="text" @input="showArg1($event)">
    <hr>
    <button @click="showAll(666, msg, $event)">全都要</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        // 隐式传递
        showData(e) {
          console.log(this.msg);
          console.log(e);
        },
        showArg(val1, val2) {
          console.log(val1);
          console.log(val2);
        },
        // 显式传递
        showArg1(e) {
          console.log(e.target.value);
        },
        // 既有自定义参数，也有预定义参数
        showAll(val1, val2, val3) {
          console.log(val1, val2, val3);
        }
      },
    })
  </script>
</body>
</html>